<!-- 天气 -->
<template>
	<div class="weather">
		<div class="label" @click="isShowSetting = !isShowSetting">
			{{ weatherData?.now.text }} {{ weatherData?.now.temp }}°C
		</div>
		<div class="scene" v-show="isShowSetting">
			<div class="icon-wrap">
				<div class="icon-item" v-for="item in weatherModeList" :key="item.title" @click="handleChange('天气', item)">
					<img :src="item.imgUrl" :class="['icon-img', { 'icon-img-active': sceneObj.weatherMode == item.title }]" />
					<div class="icon-label">{{ item.title }}</div>
				</div>
			</div>
			<div class="sceneItem">
				<span>时间：</span>
				<c-slider
					class="slider"
					v-model:value="sceneObj.weatherTime"
					:marks="{
						2: {
							label: '早晨',
						},
						33.3: {
							label: '中午',
						},
						66.7: {
							label: '傍晚',
						},
						100: {
							label: '夜晚',
						},
					}"
					:tip-formatter="tipFormatter"
					@click="clickHandle"
				/>
			</div>

			<!-- <div class="sceneItem">
				<span>色温值：</span>
				<c-slider
					class="slider"
					v-model:value="sceneObj.weatherColor"
					@change="handleChange('色温值', $event)"
					:minValue="1700"
					:maxValue="13000"
					color="#ffc100"
				/>
			</div>

			<div class="sceneItem">
				<span>对比度：</span>
				<c-slider
					class="slider"
					:step="0.1"
					v-model:value="sceneObj.weatherContrast"
					@change="handleChange('对比度', $event)"
					:minValue="1"
					:maxValue="2"
					color="#ffc100"
				/>
			</div>

			<div class="sceneItem">
				<span>饱和度：</span>
				<c-slider
					class="slider"
					:step="0.1"
					v-model:value="sceneObj.weatherSaturation"
					@change="handleChange('饱和度', $event)"
					:minValue="1"
					:maxValue="2"
					color="#ffc100"
				/>
			</div>

			<div class="sceneItem">
				<span>泛光度：</span>
				<c-slider
					class="slider"
					:step="0.1"
					v-model:value="sceneObj.weatherBloomIntensity"
					@change="handleChange('泛光度', $event)"
					:minValue="0"
					:maxValue="10"
					color="#ffc100"
				/>
			</div> -->

			<!-- <el-button type="primary" @click="isShowSetting = !isShowSetting">关闭</el-button> -->
			<!-- <el-button type="primary" @click="reset">重置当前修改</el-button> -->
		</div>
	</div>
</template>
<script lang="ts" setup>
	import Dayjs from 'dayjs'
	import { onMounted, onUnmounted, ref, watch } from 'vue'
	import { useWeatherStore } from '@/stores/weather'
	import { useAirCityStore } from '@/stores/aircity'
	import { getWeather, getWeatherCityId, getWeatherPm2P5 } from '@/api/weather'
	import { requireImg, convertToTime } from '@/utils/common'
	import { sceneObj } from '@/global'
	const weatherStore = useWeatherStore()
	const weatherData = ref()
	const weatherPm2P5 = ref()
	const getWeatherData = async () => {
		/**
		 * @description: 获取城市ID
		 * @param {any} 城市名
		 * @return {any} 城市ID
		 */
		const CityId: any = await getWeatherCityId()
		/**
		 * @description: 获取城市一天的天气信息
		 * @param {any} 城市ID
		 * @return {any}城市一天的天气信息
		 */
		const CityWeather: any = await getWeather(CityId.data.location[0].id)

		weatherData.value = CityWeather.data

		weatherStore.setWeatherData(weatherData.value)

		/**
		 * @description: 获取pm2.5数据
		 * @param {any}  城市id
		 * @return {any} pm2.5数据
		 */
		const CityWeather_Pm2P5 = await getWeatherPm2P5(CityId.data.location[0].id)

		weatherPm2P5.value = CityWeather_Pm2P5.data
		weatherStore.setWeatherPm2P5(weatherPm2P5.value)
	}
	const isShowSetting = ref(false)
	const AirCityStore = useAirCityStore()
	let updateState = ref<boolean>(false) //是否有修改
	//天气模式
	const weatherModeList = [
		{
			title: '晴天',
			imgUrl: requireImg('weather/晴天.png'),
			toggleActive(flag: boolean) {
				if (flag) {
					__g.weather.disableRainSnow(null) //关闭雨雪效果
					__g.weather.setCloudDensity(0.2, null) //云层的密度 [0,1]
					__g.weather.setCloudHeight(4.5, null) //云层的高度 [0,20]
					__g.weather.setCloudThickness(0.05, null) //云层的厚度 [0,20]
					__g.weather.setFogParam(0, 0, 0, 0, null)
				}
			},
		},
		{
			title: '多云',
			imgUrl: requireImg('weather/多云.png'),
			toggleActive(flag: boolean) {
				if (flag) {
					__g.weather.disableRainSnow(null) //关闭雨雪效果
					__g.weather.setCloudDensity(0.4, null) //云层的密度 [0,1]
					__g.weather.setCloudHeight(5, null) //云层的高度 [0,20]
					__g.weather.setCloudThickness(1, null) //云层的厚度 [0,20]
					__g.weather.setFogParam(0, 0, 0, 0, null)
				} else {
					__g.weather.setCloudDensity(0, null) //云层的密度
					__g.weather.setFogParam(0, 0, 0, 0, null)
				}
			},
		},
		{
			title: '雨天',
			imgUrl: requireImg('weather/下雨.png'),
			toggleActive(flag: boolean) {
				if (flag) {
					__g.weather.setCloudDensity(0.2, null) //云层的密度 [0,1]
					__g.weather.setCloudHeight(4.5, null) //云层的高度 [0,20]
					__g.weather.setCloudThickness(0.05, null) //云层的厚度 [0,20]
					//设置完云层厚度后才能开启雨效  <强度:[0~1],速度:[0~10],雨滴大小:[0~5]>
					__g.weather.setRainParam(0.5, 0, 0, null)
					__g.weather.setFogParam(0, 0, 0, 0, null)
				} else {
					__g.weather.disableRainSnow(null)
					__g.weather.setCloudDensity(0, null) //云层的密度
					__g.weather.setFogParam(0, 0, 0, 0, null)
				}
			},
		},
		{
			title: '雪天',
			imgUrl: requireImg('weather/下雪.png'),
			toggleActive(flag: boolean) {
				if (flag) {
					__g.weather.setCloudDensity(0.2, null) //云层的密度 [0,1]
					__g.weather.setCloudHeight(4.5, null) //云层的高度 [0,20]
					__g.weather.setCloudThickness(0.05, null) //云层的厚度 [0,20]
					//设置完云层厚度后才能开启雪效  <强度:[0~1],速度:[0~10],雪花大小:[0~25]>
					__g.weather.setSnowParam(0.14, 0, 0, null)
					__g.weather.setFogParam(0, 0, 0, 0, null)
				} else {
					__g.weather.disableRainSnow(null)
					__g.weather.setCloudDensity(0, null) //云层的密度
					__g.weather.setFogParam(0, 0, 0, 0, null)
				}
			},
		},
	]

	//格式化时间轴显示字段
	const tipFormatter = () => convertToTime.numTotime(sceneObj.value.weatherTime)

	let _resetCopy: any = {} //保存重置当前修改过的场景参数

	//重置场景
	const reset = () => {
		if (!updateState.value) return

		//重置参数需要执行的对应的事件
		handleChange('天气', weatherModeList.filter((ele) => ele.title == _resetCopy.weatherMode)[0])
		handleChange('时间', _resetCopy.weatherTime)
		handleChange('色温值', _resetCopy.weatherColor)
		handleChange('对比度', _resetCopy.weatherContrast)
		handleChange('饱和度', _resetCopy.weatherSaturation)
		handleChange('泛光度', _resetCopy.weatherBloomIntensity)
		handleChange('黑暗模式', _resetCopy.IsDarknessMode)

		//重置当前修改的参数
		sceneObj.value = _resetCopy
		updateState.value = false

		_resetCopy = {
			weatherMode: AirCityStore.$state.sceneInfo.weatherMode,
			weatherColor: AirCityStore.$state.sceneInfo.temperature,
			weatherContrast: AirCityStore.$state.sceneInfo.contrast,
			weatherSaturation: AirCityStore.$state.sceneInfo.saturation,
			weatherBloomIntensity: AirCityStore.$state.sceneInfo.bloomIntensity,
			IsDarknessMode: AirCityStore.$state.sceneInfo.darkMode,
			weatherTime: convertToTime.timeTonum(AirCityStore.$state.sceneInfo.weatherTime),
		}
	}

	//保存场景
	const save = (bool: boolean = false) => {
		AirCityStore.setSceneInfo({
			...AirCityStore.$state.sceneInfo,
			weatherMode: sceneObj.value.weatherMode,
			temperature: sceneObj.value.weatherColor,
			contrast: sceneObj.value.weatherContrast,
			saturation: sceneObj.value.weatherSaturation,
			bloomIntensity: sceneObj.value.weatherBloomIntensity,
			darkMode: sceneObj.value.IsDarknessMode,
			weatherTime: convertToTime.numTotime(sceneObj.value.weatherTime),
		})
		if (bool) {
			alert('这将保存到工程？！')
			__g.saveProject(null)
		}
	}
	onMounted(() => {
		getWeatherData()
	})
	const exit = () => {}
	const handleChange = (type: string, pyload: any) => {
		updateState.value = true

		switch (type) {
			case '天气':
				{
					if (sceneObj.value.weatherMode == pyload.title) {
						pyload.toggleActive(false)
						sceneObj.value.weatherMode = ''
					} else {
						pyload.toggleActive(true)
						sceneObj.value.weatherMode = pyload.title
					}
				}
				break
			case '时间':
				{
					let time = convertToTime.numTotime(pyload).split(':')
					let h: number = Number(time[0])
					let m: number = Number(time[1])
					__g.weather.setDateTime(2023, 8, 1, h, m, false, null)
				}
				break
			case '色温值':
				{
					__g.weather.setTemperature(pyload, null)
				}
				break
			case '对比度':
				{
					__g.settingsPanel.setPostProcessMode(
						{
							contrast: pyload,
						},
						null,
					)
				}
				break
			case '饱和度':
				{
					__g.settingsPanel.setPostProcessMode(
						{
							saturation: pyload,
						},
						null,
					)
				}
				break
			case '泛光度':
				{
					__g.settingsPanel.setPostProcessMode(
						{
							bloomIntensity: pyload,
						},
						null,
					)
				}
				break
			case '黑暗模式':
				{
					__g.weather.setDarkMode(pyload, null)
				}
				break
		}
	}

	watch(
		sceneObj,
		(sceneObj) => {
			let time = convertToTime.numTotime(sceneObj.weatherTime).split(':')
			let h: number = Number(time[0])
			let m: number = Number(time[1])
			__g.weather.setDateTime(2023, 8, 1, h, m, false, null)
		},
		{ deep: true },
	)
	const clickHandle = () => {
		if (sceneObj.value.weatherTime < 7) {
			fdapi.camera.set([12945599.12375, 4843144.504736, 227.080977, -6.549229, -65.033241, 0], 1)
			return
		}
		if (sceneObj.value.weatherTime < 75 && sceneObj.value.weatherTime > 65) {
			fdapi.camera.set([12946841.992812, 4843219.055317, 285.27123, -9.153648, -132.216263, 0], 1)
			return
		}
		if (sceneObj.value.weatherTime > 90) {
			fdapi.camera.set([12946678.9975, 4843548.128086, 295.379531, -17.590168, -142.225876, 0], 1)
			return
		}
	}
</script>

<style lang="scss" scoped>
	.weather {
		position: relative;
	}
	.label {
		display: flex;
		align-items: end;
		font-size: 25px;
		margin-left: 10px;
		height: 100%;
	}

	.scene {
		position: absolute;
		padding: 20px 50px;
		width: 500px;
		right: -100px;
		transform: translateY(30px);
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 10px;
		.icon-wrap {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.icon-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				img {
					width: 100px;
					height: 100px;
				}
			}
		}
		.sceneItem {
			display: flex;
			width: 100%;
			align-items: center;
			margin: 40px 0;

			> span {
				font-size: 30px;
				color: #ffffffe7;
			}

			.slider {
				flex: 1;
				margin-left: 10px;
			}
		}
	}
	.el-button {
		height: 50px;
		font-size: 30px;
	}
</style>
